<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>微博发布效果</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .weibo {
      width: 600px;
      border: 1px solid #ccc;

      margin: 100px auto;
      padding: 10px;

    }

    .weibo-text {
      width: 590px;
      height: 140px;
      padding: 5px;
      border: 1px solid #ccc;
      outline: none;
      resize: none;
    }

    .weibo-text:focus {
      border-color: #f60;
    }

    .weibo-btn {
      width: 80px;
      height: 30px;
      background-color: #f90;
      color: #fff;
      border: 0 none;
      margin-top: 5px;
      border-radius: 3px;
      cursor: pointer;
      outline: 0 none;
    }

    .weibo-list {
      padding-top: 10px;
    }

    .weibo-list li {
      font-size: 14px;
      line-height: 30px;
      border-bottom: 1px dotted #ccc;
      overflow: hidden;
    }

    .weibo-list li p {
      float: left;
    }

    .weibo-list li span {
      float: right;
      cursor: pointer;
    }

    .weibo-list li input {
      height: 24px;
      line-height: 24px;
      width: 300px;
      font-size: 14px;
      border: 0 none;
    }

    .time {
      margin-right: 10px;
      font-style: normal;
      float: right;
    }
  </style>
</head>

<body>
  <div class="weibo">
    <textarea class="weibo-text"></textarea>
    <input class="weibo-btn" value="发布" type="button">
    <ul class="weibo-list">
      <!-- <li>
            <p class="content">快来收了这九款用上就停不下来的应用吧！！</p>
            <span class="time"></span>
            <span class="del">删除</span>
        </li> -->
    </ul>
  </div>
</body>
<script>
  function patchZero(v) {
    return v < 10 ? '0' + v : v;
  }

  function formatDate() {
    var now = new Date();
    var y = now.getFullYear();
    var m = now.getMonth() + 1;
    var d = now.getDate();
    var h = now.getHours();
    var mm = now.getMinutes();
    var s = now.getSeconds();
    return y + '-' + patchZero(m) + '-' + patchZero(d) + ' ' + patchZero(h) + ":" + patchZero(mm) + ':' + patchZero(s);
  }
  var dianji=document.querySelector('.weibo-btn');
  var text=document.querySelector('.weibo-text');
  var list=document.querySelector('.weibo-list');
  var data=[];
  dianji.onclick=function(){
    var content=text.value;
    
    var time=formatDate();
    // 生成唯一的id
    var id=Date.now()+''+Math.floor(Math.random()*10000);
    var obj=[{
      id:id,
      content:content,
      time:time
    }]
    data.unshift(obj);
    var li=document.createElement('li');
    li.innerHTML='<p class="content">'+content+'</p>'+
            '<span class="del" data-id="'+id+'">删除</span>'+
            '<span class="time">'+time+'</span>';
    list.insertBefore(li,list.children[0]);
    // 把数组储存到本地地址
    var wbshuju=JSON.stringify(data);
    localStorage.setItem('wbshuju1',wbshuju);
    text.value='';
  }
  // 实现一切发布的微博可以出现在页面的效果
  // 提取数据
   // 1.1 先把以前发布的微博从本地存储里面获取出来
   var shujutiqu=localStorage.getItem('wbshuju1');
   var wbtiqu=JSON.parse(shujutiqu);
  //  判断一下wbtiqu是不是有数据，如果没有数据，初始化为一个空数组
  if(wbtiqu==null){
    wbtiqu=[];
  }
  // 1.3 遍历数组，生成多个li
  wbtiqu.forEach(function(e,i){
  var li=document.createElement('li');
  li.innerHTML='<p class="content">'+e.content+'</p>'+
            '<span class="del" data-id="'+e.id+'">删除</span>'+
            '<span class="time">'+e.time+'</span>';
    list.appendChild(li);
  });
  // 实现组合键发布
  // 给文本域注册按键按下事件
  text.onkeydown=function(e){
    // 判断是否按下ctrl和回车
    if(e.ctrlKey && e.keyCode===13){
    // 获取文本域的内容，发布到微博里面，存储到本地地址上
    // 使用调用函数（只要单词后面跟个(),就是把这个单词作为
    // 函数进行调用
      dianji.onclick();
    }
  }
  // 实现删除
  // 用选择器获取所有的span元素
  var spans=document.querySelectorAll('.weibo-list span');
  // 使用事件委托的方式实现删除的点击
  list.addEventListener('click',function(e){
    // 判断点击是否是span
    if(e.target.nodeName==='SPAN'){
      var span=e.target;
      var li=span.parentNode;
      list.removeChild(li);
       // 还要把对应的数据从本地删除
  // 要把li对应的数据删除掉
  // 根据id删除
  // 先得到点击的按钮的id
  // 根据点击事件e.target目标获取对应的自定义属性类名
var delid =e.target.dataset.id;
// 使用遍历数组判断储存的数据里面是否有要找的id，如果有的话就删除
wbshuju1.forEach(function(e,i){
  if(e.id===delid){
  // whshuju1.splice(从哪里开始删除,总共删除多少个)
    wbshuju1.splice(i,1);
  }
});

// 把新的数组，直接存储到localstorage里面，覆盖掉原来的内容就把删除的数据删掉了
var xinshuzu=JSON.stringify(wbshuju1);
localStorage.setItem('weiboxin',xinshuzu);
    }
  });
 

  


  

  
</script>

</html>